<template>
  <div class="work">
    
    <div class="work_body minh389">
      <div class="turn_to_list_p_sy">
        <div class="iconfont icon-youzhijiantou1"></div>
        <div class="">当前的位置 :</div>
        <router-link to="/" class="col_nav">首页</router-link>
        <div class="icon" v-if="navSet1.title">></div>
        <router-link :to="{path:'/work',query: navSet1.query}" class="col_nav" v-if="navSet1.title">{{navSet1.title}}</router-link>
        <div class="icon">></div>
        <div class="col_nav">{{ positionText }}</div>
      </div>
      <div class="work_content">
        <div class="work_left">
          <div class="list_pub_sy">
            <div
              class="hang_pub"
              v-for="(item, index) in dataList"
              :key="index"
            >
              <div class="tab_left shengluehao" @click="showDetail(item.id)">
                <div
                  class="iconfont icon-jiantou_yemian_xiangyou"
                ></div>
                <div class="shengluehao">{{ item.title }}</div>
              </div>
              <div class="tab_right">{{ clacTime(item.time) }}</div>
            </div>
          </div>
        </div>
        <div class="work_right">
          <PublicRight
            :titleC="titleC"
            :sideNav="sideNav"
            :sideNavSel="sideNavSel"
            @sideNavSelC="sideNavSelC"
            @searchKey="searchKey"
          ></PublicRight>
        </div>
        
      </div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="pageN"
          layout="prev, pager, next, jumper"
          :total="dataAllList.length">
        </el-pagination>
    </div>
    
  </div>
</template>

<script>

import PublicRight from "@components/publicRight";

export default {
  components: {
    PublicRight,
  },
  computed: {
    positionText() {
      if(this.sideNav && this.sideNav[this.sideNavSel]){
        return this.sideNav[this.sideNavSel].title;
      }else{
        return "";
      }
    },
  },
  data() {
    return {
      titleC:"协会工作",
      sideNav: [],
      sideNavSel: 0,
      dataList: [],
      dataAllList:[],
      currentPage3: 1,
      pageN:10, //每页显示多少条
      contentInfo:{},
      PageKey:"",
      navListTop:[],
      navSet1:{}
    };
  },
  beforeMount() {
    this.sideNavSel = this.$route.query.sel;
    this.PageKey = this.$route.query.key;
    this.$getApi("/Common/navlist",{}).then(res=>{
      this.navListTop = res.data;
      
      this.contentInfo = this.navListTop[this.PageKey - 1]

      this.getContent(this.contentInfo.children[this.sideNavSel].id,this.contentInfo.children[this.sideNavSel].type)
      this.titleC = this.contentInfo.title;
      this.sideNav = this.contentInfo.children;
      
      console.log(this.navListTop)
      let scc = this.navListTop[this.PageKey - 1]
      this.navSet1 = {
        title:scc.title,
        query:{sel:0,key:this.PageKey}
      }
    })
  },
  watch: {
    $route(to) {
      this.sideNavSel = Number(to.query.sel);
      this.sideNavSel = to.query.sel;
      this.PageKey = to.query.key;
      this.contentInfo = this.navListTop[this.PageKey - 1]
      this.getContent(this.contentInfo.children[this.sideNavSel].id,this.contentInfo.children[this.sideNavSel].type)
      this.titleC = this.contentInfo.title;
      this.sideNav = this.contentInfo.children;
    }
  },
  methods: {
    getContent(id,type){
      this.$getApi("/Common/content",{id:id,type:type}).then(res=>{
        this.dataAllList = res.data || []; 
        this.currentPage3 = 1;
        if(this.dataAllList.length > 0){
          this.dataList = this.dataAllList.slice(0,this.pageN)
        }else{
          this.dataList = []
        }
        
      })
    },
    sideNavSelC(index) {
      this.sideNavSel = index;

      this.getContent(this.contentInfo.children[index].id,this.contentInfo.children[index].type)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage3 = val
      console.log(`当前页: ${val}`);
      console.log(this.dataAllList ,(this.currentPage3-1)*this.pageN ,this.pageN)
      this.dataList = this.dataAllList.slice((this.currentPage3-1)*this.pageN,this.currentPage3*this.pageN)
      console.log(this.dataList)

    },
    clacTime(time){
      if(time){
        return time.split(" ")[0]
      }else{
        return ""
      }
    },
    showDetail(id){
      this.$router.push({path:"/detail",query:
      {thisId:id,parentId:this.contentInfo.children[this.sideNavSel].id,type:this.contentInfo.children[this.sideNavSel].type,sel:this.sideNavSel,key:this.PageKey}})
    },
    searchKey(key){
      this.$getApi("/Common/pingtaisearch",{key:key}).then(res=>{
        this.dataAllList = res.data || []; 
        this.currentPage3 = 1;
        if(this.dataAllList.length > 0){
          this.dataList = this.dataAllList.slice(0,this.pageN)
        }else{
          this.dataList = []
        }
      })
    }
  },
};
</script>
<style scoped lang="stylus">
.work {
  .work_body {
    width: 1000px;
    margin: 0 auto;

    .work_content {
      display: flex;
      justify-content: space-between;

      .work_left {
        width: 700px;
      }
    }
  }
}

.list_pub_sy {
  padding-bottom 16px ;
  +.list_pub_sy{
    border-top 1px dashed #849fbd
    padding-top 6px
  }
  .hang_pub {
    display: flex;
    padding-top: 9px;
    font-size: 15px;
    cursor: pointer;

    .iconfont {
      font-size: 12px;
      padding-right: 4px;
    }

    .tab_left {
      flex: 1;
      display: inline-flex;
      align-items: center;
      width: 90%;
    }

    .tab_right {
      color: #999;
    }
  }
}
</style>
